<template>
  <div class="container">
    <!-- 头部卡片 -->
    冯博
    <el-card>
      <el-row>
        <span style="font-size:12px;color:pink;">说明:目前支持学科和关键字条件筛选</span>
        <el-button class="btnn" type="success" size="small" icon="el-icon-edit" style=" margin-bottom: 20px;"
          @click="$router.push('/questions/new')">新增试题
        </el-button>
      </el-row>
      <!-- 头部input框 -->
      <el-form label-width="80px" :model="queryInfo" ref="formRef">
        <el-row type="flex">
          <el-form-item label="学科" size="small" label-width="80px" prop="subjectID">
            <el-select placeholder="请选择" v-model="queryInfo.subjectID" @change="subjectChange" class="w215">
              <el-option v-for="(item, index) in studyQuery" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录" size="small" prop="catalogID">
            <el-select placeholder="请选择" v-model="queryInfo.catalogID" @change="directoryNameChange" class="w215">
              <el-option v-for="item in directorysList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" size="small" prop="tags">
            <el-select placeholder="请选择" v-model="queryInfo.tags" class="w215">
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in directoryNameList"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" size="small" prop="keyword">
            <el-input v-model="queryInfo.keyword" class="w215"></el-input>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="试题类型" size="small" label-width="80px" prop="questionType">
            <el-select placeholder="请选择" v-model="queryInfo.questionType" class="w215">
              <el-option label="单选" value="0"></el-option>
              <el-option label="多选" value="1"></el-option>
              <el-option label="简答" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度" size="small" label-width="80px" prop="difficulty">
            <el-select placeholder="请选择" v-model="queryInfo.difficulty" class="w215">
              <el-option label="简单" value="0"></el-option>
              <el-option label="一般" value="1"></el-option>
              <el-option label="困难" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" size="small" label-width="80px" prop="direction">
            <el-select placeholder="请选择" v-model="queryInfo.direction" class="w215">
              <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人" size="small" label-width="80px" prop="creatorID">
            <el-select placeholder="请选择" v-model="queryInfo.creatorID" class="w215">
              <el-option v-for="(item, index) in peopleList" :key="index" :label="item.username" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="题目备注" size="small" prop="remarks">
            <el-input v-model="queryInfo.remarks" class="w215"></el-input>
          </el-form-item>
          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="queryInfo.shortName" class="w215"></el-input>
          </el-form-item>
          <!-- 渲染城市 -->
          <el-form-item label="城市" size="mini">
            <el-row type="flex" justify="space-between" class="w215">
              <el-select placeholder="请选择" v-model="queryInfo.province" @change="changeCity">
                <el-option v-for="(item, index) in provincesList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
              <el-select placeholder="请选择" v-model="queryInfo.city">
                <el-option v-for="(item, index) in cityList" :key="index" :value="item" :label="item"></el-option>
              </el-select>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="end" class="w215">
              <el-button size="small" @click="clearAll">清空</el-button>
              <el-button type="primary" size="small" @click="getlist">搜索</el-button>
            </el-row>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- 显示多少条数据 -->
      <el-alert title="共有10条记录" type="info" left show-icon :closable="false">
      </el-alert>
      <!-- 渲染内容 -->
      <el-table :data="query">
        <el-table-column prop="number" label="试题编号"></el-table-column>
        <el-table-column prop="direction" label="学科"></el-table-column>
        <el-table-column prop="catalog" label="目录"></el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template v-slot="{ row }">
            <span v-if="row.questionType === '1'">单选</span>
            <span v-else-if="row.questionType === '2'">多选</span>
            <span v-else-if="row.questionType === '3'">简单</span>
          </template>
        </el-table-column>
        <el-table-column label="题干">
          <template slot-scope="{row}">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="questionType" label="难度">
          <template v-slot="{ row }">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else-if="row.difficulty === '3'">困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="{ row }">
            <!-- 详情按钮 -->
            <el-button @click="detailsBtn(row)" type="primary" plain icon="el-icon-view" circle size="small">
            </el-button>
            <!-- 编辑按钮 -->
            <el-button type="primary" plain icon="el-icon-edit" circle @click="editBtn(row)" size="small"></el-button>
            <!-- 删除按钮 -->
            <el-button @click="clearBtn(row)" type="danger" plain icon="el-icon-delete" circle size="small"></el-button>
            <!-- 状态按钮 -->
            <el-button type="success" plain icon="el-icon-check" circle @click="open(row)" size="small"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination style="margin-top:20px" background @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[5, 10, 20, 50]"
          :page-size="queryInfo.pagesize" layout="prev, pager,next,jumper,sizes" :total="counts">
        </el-pagination>
      </div>
    </el-card>
    <!-- 题目浏览弹框 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%">
      <el-row>
        <el-col :span="6">【题型】：<span v-if="editlist.questionType === '1'">单选</span><span
            v-else-if="editlist.questionType === '2'">多选</span><span v-else>简单</span></el-col>
        <el-col :span="6">【编号】：{{ editlist.id }}</el-col>
        <el-col :span="6">【难度】：<span v-if="editlist.difficulty === '1'">简单</span><span
            v-else-if="editlist.difficulty === '2'">一般</span><span v-else>困难</span></el-col>
        <el-col :span="6">【标签】：{{ editlist.tags }}</el-col>
        <el-col :span="6">【学科】：{{ editlist.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ editlist.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ editlist.direction }}</el-col>
      </el-row>
      <hr />
      <el-row>【题干】：</el-row>
      <p v-html="editlist.question" style="color:#00f"></p>
      <el-row>多选题 选项：(选中的选项为正确答案)</el-row>
      <el-row>
        <el-col v-for="item in editlist.options" :key="item.id">
          <el-checkbox v-model="item.isRight" :true-label="1" :false-label="0">{{ item.title }}</el-checkbox>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="3">【参考答案】：</el-col>
        <el-col :span="21">
          <el-button type="danger" @click="flag = !flag">视频答案预览</el-button>
        </el-col>
        <el-col>
          <video :src="editlist.videoURL" width="400px" controls autoplay v-if="flag === true"></video>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="3">【答案解析】：</el-col>
        <el-col :span="21"><a :href="editlist.remarks">{{ editlist.remarks }} 有答案</a>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="3">【题目备注】：</el-col>
        <el-col :span="21">{{ editlist.remarks }} 有答案 </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="primary">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions'
import { list as peopleList } from '@/api/base/users'
import { simple } from '@/api/hmmm/subjects'
import { simple as directorysList } from '@/api/hmmm/directorys'
import { simple as directoryNameList } from '@/api/hmmm/tags'
import { direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  name: 'questions-base',
  data () {
    return {
      dialogVisible: false,
      counts: 0,
      // query: {
      //   page: 1,
      //   pagesize: 10
      // }
      // 页面渲染
      query: [],
      queryInfo: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      // 题型
      detailsItem: {},
      //  学科
      studyQuery: [],
      // 目录列表
      directorysList: [],
      // 标签列表
      directoryNameList: [],
      // 方向
      direction,
      // 录入人
      peopleList: [],
      // 城市列表
      provincesList: [],
      // 区域列表
      cityList: [],
      // 详情列表
      editlist: [],
      flag: false
    }
  },
  created () {
    this.getlist()
    this.getstudyQuery()
    this.getPeopleList()
    this.getProvincesList()
  },
  methods: {
    // 分页
    handleSizeChange (newPage) {
      this.queryInfo.pagesize = newPage
      this.getlist()
    },
    handleCurrentChange (newPagesize) {
      this.queryInfo.page = newPagesize
      this.getlist()
    },
    // 调用接口请求数据
    async getlist () {
      const res = await list(this.queryInfo)
      this.query = res.data.items
      this.counts = res.data.counts
    },
    // 调用接口请求学科数据
    async getstudyQuery () {
      const res = await simple()
      this.studyQuery = res.data
    },
    // 调用接口请求目录列表
    async subjectChange () {
      const res = await directorysList(this.queryInfo.subjectID)
      this.directorysList = res.data
    },
    // 调用接口请求标签列表
    async directoryNameChange () {
      const res = await directoryNameList(this.queryInfo.catalogID)
      this.directoryNameList = res.data
    },
    // 调用接口请求录入人数据
    async getPeopleList () {
      const res = await peopleList()
      this.peopleList = res.data.list
    },
    // 调用接口请求城市数据
    getProvincesList () {
      const res = provinces()
      this.provincesList = res
    },
    // 区域数据
    changeCity (value) {
      // console.log(value)
      // console.log(citys(value))
      this.cityList = citys(value)
      this.queryInfo.city = citys(value)[0]
    },
    // 清空事件
    clearAll () {
      this.$refs.formRef.resetFields()
      this.queryInfo.city = ''
      this.queryInfo.province = ''
      this.getlist()
    },
    // 搜索事件
    // searchAll () {
    //   // this.getlist(this.queryInfo)
    // }
    // 删除按钮
    clearBtn (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getlist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      //
    },
    open (row) {
      console.log(row)
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          row.choiceState = 1
          await choiceAdd(row)
          this.$message({
            type: 'success',
            message: '加入精选成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 题目浏览
    async detailsBtn (id) {
      this.dialogVisible = true
      const { data: res } = await detail(id)
      this.editlist = res
      console.log(this.editlist)
    },
    editBtn (row) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.w215 {
  width: 215px;
}
.block {
  text-align: right;
  margin-top: 8px;
}
.el-divider {
  margin-top: 15px;
}
.btnn {
  float: right;
}
// .box {
//   // float: left;
// }
</style>
